<template>
  <el-upload action="#" list-type="picture-card" :auto-upload="false" ref="uploadRef" :on-change="uploadFile" :on-remove="handleRemove" :file-list="fileList" :limit="2" :on-exceed="limitImg">
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { NewType } from '@/type/BaseType'
import { upImageApi } from '@/api/img';
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, type UploadFile,UploadUserFile, UploadFiles } from 'element-plus'
//注册事件
const emits = defineEmits(['getImg'])
//图片上传组件的ref属性
const uploadRef = ref()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
type PropType = {
  fileList:UploadUserFile[];
  oldUrl:Array<{url:string}>;
}
//接受父组件传递的参数
const props = withDefaults(defineProps<PropType>(),{
  fileList:()=>[],
  oldUrl:()=>[],
})
//参返回给父组件的值
const newImgRes = ref<NewType>({
  newImgUrl:[],
  deleteUrl:[],
})
//删除图片
const handleRemove = (file: UploadFile) => {
  if(props.oldUrl.some(item => item.url === file.name)){
    newImgRes.value.deleteUrl.push({url:file.name})
    emits("getImg", newImgRes.value)
  }else{
    let image = newImgRes.value.newImgUrl.filter((item) => item.url != file.name)
    newImgRes.value.newImgUrl = image
    emits("getImg", newImgRes.value)
  }
}
//文件个数超出
const limitImg = (files: File[], uploadFiles : UploadFiles) =>{
  ElMessage.warning("最多只能上传" + uploadFiles.length + "张图片")
}
//上传数据提交
const uploadFile = async(file:any)=>{
    const typeArr = ["image/png","image/gif","image/jpeg","image/jpg"];
    const isImg = typeArr.indexOf(file.raw.type) !== -1;
    const isMore3M = file.size / 1024 / 1024 < 3;
    if(!isImg){
      ElMessage.warning("只能上传图片类型");
      uploadRef.value?.clearFiles();
      return;
    }
    if(!isMore3M){
      ElMessage.warning("图片大小不能超过3M");
      uploadRef.value?.clearFiles();
      return;
    }
    //组装上传的数据
    const formData = new FormData()
    formData.append("file",file.raw)
    //提交数据
    const result = await upImageApi(formData)
    if(result && result.code == 200 && result.data){
      ElMessage.success('图片上传成功')
      file.name = process.env.BASE_API + result.data
      //设置到返回子组件的数据里面
      newImgRes.value.newImgUrl.push({
        url:process.env.BASE_API + result.data
      })
      emits('getImg',newImgRes.value)
    }
}   
</script>

<style scoped></style>